<template>
  <div class="main-content">
      <el-row>
        <el-col :span="4" v-loading="loading">
           <div style="background-color: #f3f6fb;width: 100%" class="main-height">
             <div   class="list-row" v-for="(item,index) in roleList" :key="item.id">
               <div :ref="`roleData${index}`" @click="cutAuth(index,item.id)"  class="button">
                 <span>{{item.roleName}}</span>
               </div>
               <div  class="operation" >
                 <div @click="queryRole(item.id,index)" class="operation-view">
                   <i class="el-icon-view"></i>
                 </div>
                  <div @click="editRole(item.id,index)" class="operation-edit">
                    <i class="el-icon-edit-outline"></i>
                  </div>
                   <div @click="delRole(item.id,index,item.roleName)" class="operation-del">
                     <i class="el-icon-delete"></i>
                   </div>
               </div>
             </div>
             <div class="list-row-add" @click="addRole">
               <i class="el-icon-plus"></i>
             </div>

           </div>
        </el-col>
        <el-col v-loading="treeLoading" :span="20">
          <div style="height: 40px;">
            <el-button class="title-button" style="margin-top: 10px" @click="save" type="primary">保存</el-button>
          </div>
          <el-divider></el-divider>
          <el-tree
              :data="treeData"
              :props="props"
              default-expand-all
              node-key="id"
              show-checkbox
              ref="treeData"
              @check="check">
          </el-tree>

        </el-col>
      </el-row>
    <role-add-update-form @reload="refreshData()" ref="roleAddUpdateForm"></role-add-update-form>
  </div>

</template>

<script>
import roleAddUpdateForm from './role-add-update-form'
import {VueUtil} from "@/util";
import {NuoRoleController,NuoAuthController,NuoRoleAuthController} from "@/actions/controller";
export default {
  name: "role",
  components:{
    roleAddUpdateForm
  },
  data(){
    return{
      roleList:[],
      loading: false,
      isPitchOn: false,
      oldIndex: null,
      selectList: [],
      selectListView: [],
      props: {
        label: 'name',
        children: 'children'
      },
      treeLoading: false,
      treeData: [],
      roleId: ''
    }
  },
  mounted() {

    this.initTree()
  },
  methods:{
    init(){
      this.loading = true
       VueUtil(this).ajax(NuoRoleController.queryRolePageByParam).then(res=>{
          this.roleList = res.data
          if(this.roleList){
            this.roleId = this.roleList[0].id
            this.refresh()
            this.getTreeData()
          }
          this.loading = false
       }).catch(()=>{
         this.loading = false
       })
    },
    refreshData(){
       this.init()
    },
    getTreeData(){
      this.treeLoading = true
       VueUtil(this).ajax(NuoRoleAuthController.queryAuthIdsByRoleId,{roleId:this.roleId}).then(res=>{
         this.selectList = res.data
         this.$refs.treeData.setCheckedKeys(this.selectList)
         this.treeLoading = false
       }).catch(()=>{
         this.treeLoading = false
       })
    },
    initTree(){
      this.treeLoading = true
      VueUtil(this).ajax(NuoAuthController.queryAuthAll).then(res=>{
         this.treeData = res.data
         this.treeLoading = false
         this.init()
      }).catch(()=>{
        this.treeLoading = false
      })
    },
    check(data,nodes){
      this.selectList = nodes.checkedKeys.concat(nodes.halfCheckedKeys)
      this.selectListView = nodes.checkedKeys
    },
    addRole(){
      this.$refs.roleAddUpdateForm.init("添加角色")
    },
    refresh(index = 0){
      this.$nextTick(()=>{
        if(this.oldIndex != null){
          this.$refs[`roleData`+this.oldIndex].className = "button"
        }
        this.$refs[`roleData`+index].className = "button-click"
        this.oldIndex = index
      })

    },
    editRole(id,index){
      this.loading = true
      VueUtil(this).ajax(NuoRoleController.queryRoleById,{id}).then(res=>{
        this.$refs.roleAddUpdateForm.init("修改角色",res.data)
        this.refresh(index)
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    delRole(id,index,roleName){
      VueUtil(this).del(`您将删除${roleName}这个角色`,NuoRoleController.deleteRoleById,{id},()=>{
        this.refreshData()
      })
    },
    queryRole(id,index){
      this.loading = true
      VueUtil(this).ajax(NuoRoleController.queryRoleById,{id}).then(res=>{
        this.$refs.roleAddUpdateForm.init("查看角色",res.data,true)
        this.refresh(index)
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    cutAuth(index,id){
      this.roleId = id
      this.getTreeData()
      this.refresh(index)
    },
    save(){
      this.treeLoading = true
      VueUtil(this).ajax(NuoRoleAuthController.saveRoleAuth,{roleId:this.roleId,authIds: this.selectList,selectListView: this.selectListView}).then(res=>{
        VueUtil(this).hint(res.message)
        this.treeLoading = false
      }).catch(()=>{
        this.treeLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>